<template>
	<div class="market" :style="style">
		<div class="market-body" @mouseover="showMenu" @mouseout="hideMenu">
			<div class="title">{{t("the_market.title")}}</div>
			<div class="current">{{marketTitle}}</div>
			<div class="image">
				<img src="@/assets/images/ui/market/arrow.svg" />
			</div>
		</div>

		<div class="market-menu-body" :class="state.isShow?'showed':''"  @mouseleave="hideMenu">
			<div class="menu-item" :class="state.activeItem.id==item.id?'active':''" v-for="(item, index) in markets" 
			    :style="itemColor(item)"  @click="marketClick(item)"
				   @mouseover="showMenu(item)" 
				   @mouseout="item.isOvered=false">
				<img :src="item.icon" />
				<span class="text">{{t(item.title)}}</span>
			</div>
		</div>
	</div>

</template>

<script lang="setup">
	import {
		defineComponent,
		ref,
		reactive,
		onMounted,
		computed,
		onUnmounted
	} from 'vue';

	
	import i18n from "@/i18n/index";

	import international from "@/assets/images/ui/market/global.svg"
	import chinese from "@/assets/images/ui/market/china.svg"


	// 使用特殊的编译宏来指定组件的名称
	export default defineComponent({
		name: 'TheMarket',
		
		props:{
			market: {
				type: String,
				default: "",
			},
			style: {
				String,
				default: ""
			},
			color: {
				type: String,
				default: ""
			},
			selected_color: {
				type: String,
				default: ""
			},
			mouseover_color: {
				type: String,
				default: ""
			}		
		},
	
		setup: (props, {
				emit
			}) => {
				
			const t =i18n.global.t;
				
			const markets = ref([{
				id: "en",
				icon: international,
				title: "the_market.global.title",
				short: "the_market.global.short"
			}, {
				id: "zh",
				icon: chinese,
				title: "the_market.chinese.title",
				short: "the_market.chinese.short"
			}])
				
			const marketTitle=computed({
				get(){	
					if (!state.activeItem){
						state.activeItem=markets.value[0];
					}
					return t(state.activeItem.short);
				}
			})
			
			const itemColor=computed(()=>(item)=>{
				if (item.isOvered && props.mouseover_color){
					return {color:props.mouseover_color};
				}
				if (state.activeItem.id==item.id){
					if (props.selected_color){
						return {color: props.selected_color};
					}
				}
				if (props.color){
					return {color: props.color};
				}
				return {};
			})

			const state = reactive({
				isShow: false,
				closable: false,
				activeItem: null
			})
			
			onMounted(()=>{
				if (props.market){
					for (let i=0;i<markets.value.length;i++){
						if (markets.value[i].id==props.market){
							state.activeItem=markets.value[i];
							break;
						}
					}
				}
				if (!state.activeItem){
					state.activeItem=markets.value[0];
				}
			});

			let handler = 0;

			const showMenu = (item) => {
				if (handler > 0) {
					clearTimeout(handler);
					handler = 0;
				}		
				if (item){
					item.isOvered=true;
				}
				state.isShow = true;
			}
			
			const hideMenu = (item) => {
				if (item){
					item.isOvered=false;
				}
				if (handler == 0) {
					state.closable=true;
					handler = setTimeout(() => {
						if (state.closable){
							state.isShow = false;
						}
						
						if (handler > 0) {
							clearTimeout(handler);
							handler = 0;
						}
					}, 500);
				}
			}


			const marketClick = (item) => {
				state.isShow = false;

				let _item = {
					id: item.id,
					title: item.title
				}
				
				state.activeItem=item;
				
				emit("marketClick", _item);
			}
			
			return {
				state,
				itemColor,
				markets,
				t,
				marketTitle,
				hideMenu,
				showMenu,
				marketClick
			}
		}
	});
</script>

<style scoped lang="scss">
	.market {
		width: auto;
		display: block;
		position: relative;

		.market-body {
			padding: 5px;
			display: flex;
			position: relative;

			.title {
				font-size: 14px;
				text-align: left;
				line-height: 30px;
				word-wrap: break-word;
				text-transform: none;
				color: rgba(0, 0, 0, 0.34901960784313724);
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				letter-spacing: normal;

				border-width: 0px;
				width: 65px;
				height: 30px;
				display: flex;
			}

			.current {
				font-size: 14px;
				text-align: left;
				line-height: 30px;
				word-wrap: break-word;
				text-transform: none;
				font-family: 'Arial Normal', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				letter-spacing: normal;
				color: #333333;

				border-width: 0px;
				width: 65px;
				height: 30px;
				display: flex;
			}

			.image {
				width: 20px;
				padding-left: 5px;
				text-align: right;

				border-width: 0px;
				height: 30px;
				display: flex;
				align-items: center;
			}
		}

		.market-menu-body {
			position: absolute;
			top: 46px;
			left: 0px;
			z-index: 10;

			background-color: #fff;
			height: 0px;
			display: block;
			text-align: center;
			overflow: hidden;

			transition-property: height;

			transition-duration: 1s;

			transition-timing-function: ease-in;

			transition-delay: 50ms;

			&.showed {
				height: auto;

				border: 1px solid #c1c1c1;
				border-radius: 5px;
				box-shadow: 5px 5px 5px rgba(195, 193, 193, 0.34901960784313724);
			}

			.menu-item {

				font-size: 16px;
				//border-bottom: 1px solid #f2f2f2;
				color: #666;
				cursor: pointer;
				display: flex;
				align-items: center;
				position: relative;

				min-width: 180px;
				padding: 5px;
				
				&.active{
					color: pink;
				}
				
				&:hover {
					color: #CA3E31;
				}

				img {
					width: 32px;
					height: 32px;
					margin-right: 10px;
					object-fit: contain;
				}

				.arrow {
					position: absolute;
					right: 5px;
					height: 24px;
					height: 24px;
				}
			}
		}
	}
</style>